<template>
  <el-dialog
    title="添加影厅"
    @close="cls"
    :visible="isDialog"
    :modal-append-to-body="false"
  >
    <el-form :model="ruleForm" :rules="rules" label-width="80px" ref="ruleForm">
      <el-form-item label="影院名">
        <template>
          <el-select v-model="ruleForm.cinemaId" @click.native="open"  placeholder="请选择">
            <el-option
              v-show="options.length>0"
              v-for="item in options"
              :key="item.cinema_id"
              :label="item.cinema_name"
              :value="item.cinema_id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="影厅名">
        <el-input v-model="ruleForm.hallName"></el-input>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="center" align="center">
      <el-col :span="6">
        <el-button @click="cls">取消</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="add">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getAllCinema } from '@/api/hall'
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      rules: {},
      options: []
    }
  },
  computed: {
    ...mapState('hall', ['isDialog', 'ruleForm', 'isAdd'])
  },
  methods: {
    ...mapActions('hall', ['changeIsDialog']),
    cls () {
      this.changeIsDialog(false)
    },
    async open () {
      const res = await getAllCinema()
      this.options = res.data
    },
    add () {
      if (this.isAdd) {
        this.$parent.add()
      } else {
        this.$emit('update')
      }
      this.changeIsDialog(false)
    }
  }
}
</script>

<style>
.el-input--suffix .el-input__inner {
  width: 370px;
}
</style>
